<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<title>提交订单</title>
<link rel="stylesheet" href="css/global.css">
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<link rel="stylesheet" href="css/orderComfirm.css">
</head>
<body>
    <div class="page-order-comfirm" id="orderComfirm">
        <div class="section-con">
            <div class="sec-title-border clearfix">
                <h3>收货地址</h3>
            </div>
            <div class="addressBox clearfix">
                <div class="address-item" v-for="(item,index) in addressList" :key="index" :class="{'selected':item.selected}">
                    <div class="address-item-in">
                         <div>收件人：{{item.addr_person}}</div>
                         <div>地址：{{item.addr_province + item.addr_city + item.addr_district + item.addr_moreD}}</div>
                         <div>电话：{{item.addr_tel}}</div>
                    </div>
                 </div>
            </div>
            <div class="sec-title-border clearfix">
                <h3>配送方式</h3>
            </div>
            <div class="style-list delivery">
                <ul class="clearfix">
                   <li :class="{'selected':delivery==1}" @click="delivery = 1">快递上门</li>
                </ul>
            </div>
            <div class="sec-title-border clearfix">
                <h3>支付方式</h3>
            </div>
            <div class="style-list pay">
                <ul class="clearfix">
                   <li :class="{'selected':payment==1}" @click="payment = 1">在线支付</li>
                </ul>
            </div>
            <div class="sec-title-border mb0 clearfix">
                <h3>产品详情</h3>
            </div>
            <div class="orderBox">
                <div class="orderC-table">
                    <table cellspacing="0" cellpadding="0" border="0" width="100%" class="orderC-tb">
                        <thead>
                            <tr>
                                <th width="60%">订单详情 </th>
                                <th width="20%">收件人</th>
                                <th width="20%">金额</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item,index) in productList" :key="index">
                                <td class="text-left"><div class="order-gw clearfix">
                                        <div class="order-img"><img :src="item.pro_img"/></div>
                                        <div class="order-sum">
                                            <h2><a :href="item.pro_url">{{item.pro_name}}</a></h2>
                                            <div class="parameter">{{item.pro_dec}}</div>
                                        </div>
                                    </div></td>
                                <td>{{item.pro_person}}</td>
                                <td><span class="noTel">总额</span><span class="priceD">￥{{item.pro_price.toFixed(2)}}</span></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="orderC-total">
                        <div class="order-t">
                            <dl class="clearfix">
                                <dd class="dl_ddL">商品总额：</dd>
                                <dd class="dl_ddR">￥{{getTotal1.totalPrice.toFixed(2)}}</dd>
                            </dl>
                        </div>
                        <div class="order-fare">
                            <dl class="clearfix">
                                <dd class="dl_ddL">运　　费：</dd>
                                <dd class="dl_ddR">￥{{freight.toFixed(2)}}</dd>
                            </dl>
                        </div>
                        <div class="order-sum">
                            <dl class="clearfix">
                                <dd class="dl_ddL">应付总额：</dd>
                                <dd class="dl_ddR"><span class="fontBig">￥{{(getTotal1.totalPrice + freight).toFixed(2)}}</span></dd>
                            </dl>
                        </div>
                    </div>
                    <div class="order-message">
                        <dl class="clearfix">
                                <dd class="dl_ddL">给卖家留言：</dd>
                                <dd class="dl_ddR">
                                    <textarea class="textarea-gw" placehold="对本次交易补充说明" v-model="msg" maxlength="85"></textarea>
                                    <span>{{msg.length}}/85</span>
                                </dd>
                            </dl>
                    </div>
                    <div class="clear"></div>
                    <div class="order-submit">
                            <a href="#" class="btn-red btn-submit" @click="createOrder">提交订单</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#orderComfirm',
        data:{
            productList:[
            {
                'pro_name': '数码相机',//产品名称
                'pro_url': '#',//产品链接
                'pro_dec': '颜色：黑色',//产品参数
                'pro_person': '杨天',//收货人
                'pro_img': 'images/test1.jpg',//图片链接
                'pro_price': 800//单价
            }
            ],
            addressList: [
                {
                    'addr_person': '杨天',
                    'addr_province':'浙江省',
                    'addr_city':'杭州市',
                    'addr_district':'滨江区',
                    'addr_moreD':'西兴街道',
                    'addr_tel':'13737371111',
                    'addr_email':'yzh@163.com',
                    'selected': true
                }
            ],
            freight: 10,//运费
            msg: '',//留言
            delivery: 1,//配送方式
            payment: 1//支付方式
        },
        computed: {
            getTotal1:function(){
                //价格总和
                var _proList=this.productList,totalPrice=0;
                for(var i=0,len=_proList.length;i<len;i++){
                    //总价累加
                    totalPrice+=_proList[i].pro_price;
                }
                //选择产品的件数就是_proList.length，总价就是totalPrice
                return {totalPrice:totalPrice}
            },
        },
        mounted() {
          this.getNewOrderId();
        },
        methods:{
            getNewOrderId() {
                axios.get('/order/getNewOrderId')
                    .then((rep) => {
                        then.orderId = rep.data.data;
                        console.log(then.orderId);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            createOrder() {
                axios.get('/order/getNewOrderId')
                    .then((rep) => {
                        let orderId = rep.data.data;
                        axios.get('/order/createOrder/'+orderId)
                            .then((rep) => {
                                window.open("pay.html?orderId="+orderId);
                            })
                            .catch(function (error) {
                                console.log(error);
                            });
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    })
</script>
</html>